'use client'
import { t } from 'i18next'
import { useParams, usePathname } from 'next/navigation'
import { useState } from 'react'
import { AudioPlayerManager } from './audio.player.manager'
import s from './style.module.css'
import { useChatContext } from '@/app/components/chat/chat-context'
import Tooltip from '@/app/components/base/tooltip'
import Loading from '@/app/components/base/loading'

type AudioBtnProps = {
  id?: string
  voice?: string
  value?: string
  className?: string
  isAudition?: boolean
  noCache?: boolean
}

type AudioState = 'initial' | 'loading' | 'playing' | 'paused' | 'ended'

const AudioBtn = ({
  id,
  voice,
  value,
  className,
  isAudition,
}: AudioBtnProps) => {
  const [audioState, setAudioState] = useState<AudioState>('initial')

  const params = useParams()
  const pathname = usePathname()
  const audio_finished_call = (event: string): any => {
    switch (event) {
      case 'ended':
        setAudioState('ended')
        break
      case 'paused':
        setAudioState('ended')
        break
      case 'loaded':
        setAudioState('loading')
        break
      case 'play':
        setAudioState('playing')
        break
      case 'error':
        setAudioState('ended')
        break
    }
  }
  let url = ''
  let isPublic = false

  if (params.token) {
    url = '/text-to-audio'
    isPublic = true
  }
  else if (params.appId) {
    if (pathname.search('explore/installed') > -1)
      url = `/installed-apps/${params.appId}/text-to-audio`
    else
      url = `/apps/${params.appId}/text-to-audio`
  }
  const handleToggle = async () => {
    if (audioState === 'playing' || audioState === 'loading') {
      setTimeout(() => setAudioState('paused'), 1)
      AudioPlayerManager.getInstance().getAudioPlayer(url, isPublic, id, value, voice, audio_finished_call).pauseAudio()
    }
    else {
      setTimeout(() => setAudioState('loading'), 1)
      AudioPlayerManager.getInstance().getAudioPlayer(url, isPublic, id, value, voice, audio_finished_call).playAudio()
      // processTextToSpeech(value, ()=>{
      //   console.log("TTS:CCC:", value)
      // })
    }
  }
  const handleToggle1 = async () => {
    const synth = window.speechSynthesis
    const speak = () => {
      if (synth.speaking) {
        console.error('speechSynthesis.speaking')
        return
      }
      if (value !== '') {
        const utterThis = new SpeechSynthesisUtterance(value)
        utterThis.onend = function (event) {
          console.log('SpeechSynthesisUtterance.onend')
        }
        utterThis.onerror = function (event) {
          console.error('SpeechSynthesisUtterance.onerror')
        }
        utterThis.voice = window.speechSynthesis.getVoices().find(v => v.lang === 'zh_CN')!
        utterThis.pitch = 1
        utterThis.rate = 1
        synth.speak(utterThis)
      }
    }
    if (audioState === 'playing' || audioState === 'loading') {
      setTimeout(() => setAudioState('paused'), 1)
      synth.pause()
    }
    else {
      setTimeout(() => setAudioState('loading'), 1)
      speak()
    }
  }

  const tooltipContent = {
    initial: t('appApi.play'),
    ended: t('appApi.play'),
    paused: t('appApi.pause'),
    playing: t('appApi.playing'),
    loading: t('appApi.loading'),
  }[audioState]
  const { eventEmitter } = useChatContext()
  eventEmitter.useSubscription(({
    type,
    data,
  }) => {
    if (type === 'answer.complete' && data.id === id && audioState === 'initial')
      handleToggle()
  })

  return (
    <div
      className={`inline-flex items-center justify-center ${(audioState === 'loading' || audioState === 'playing') ? '' : className}`}
    >
      <Tooltip
        popupContent={tooltipContent}
      >
        <button
          disabled={audioState === 'loading'}
          className={`box-border flex h-6 w-6 cursor-pointer items-center justify-center ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
          onClick={handleToggle}
        >
          {audioState === 'loading'
            ? (
              <div className="flex h-full w-full items-center justify-center rounded-md">
                <Loading/>
              </div>
            )
            : (
              <div
                className={`flex h-full w-full items-center justify-center rounded-md ${!isAudition ? 'hover:bg-gray-50' : 'hover:bg-gray-50'}`}
              >
                <div className={`h-4 w-4 ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}
                  title={audioState === 'playing' ? '暂停播放' : '播放'}
                ></div>
              </div>
            )}
        </button>
      </Tooltip>
    </div>
  )
}

export default AudioBtn
